
import { Box, Button, Link } from "@mui/material";
import React from "react";
import { Badge } from "antd-mobile";
import { go_, infoKey } from "./util";
// import 'antd-mobile/dist/antd-mobile.css';

// import { getFonts } from "font-list";

export default function Me() {

    console.log(1, ...[2, 3, 4], 5)

    const foo = 'barr'
    const gj = '国籍'
    const fc = {
        foo, name: foo,
        age: 23,
        [gj]: '中国',
        地区: '中国大陆',
        getInfo() {
            this.sex = '男'
            return `${this.name}:${this.age}`
        }
    }
    console.log(fc.getInfo())
    fc['mz'] = '汉族'
    console.log(fc, fc.getInfo.name, fc.国籍, fc.地区)
    console.log(JSON.stringify(fc))
    console.log(Object.keys(fc))

    const logout = function (e) {
        localStorage.removeItem(infoKey)
        window.location.reload()
        // console.log(e)
    }

    // getFonts().getFonts()
    //     .then(fonts => {
    //         console.log(fonts)
    //     })
    //     .catch(err => {
    //         console.log(err)
    //     })

    const boxSx = {
        typography: 'body1',
        '& > :not(style) + :not(style)': {
            ml: 2,
        },
    }

    return <div>
        <h1>Me</h1>
        <div>
            <Badge content='你妹'>
                <a href='https://mobile.ant.design/zh/components/badge'>antd-mobile文档</a>
            </Badge>

            <div><a href={go_('/me/font')}>选择字体</a> <a href='https://github.com/oldj/node-font-list'>font-list</a></div>
            <div><a href='https://zh-hans.reactjs.org/docs/components-and-props.html'>reactjs文档</a></div>
            <div><a href='https://reactrouter.com/docs/en/v6/api#useroutes'>reactrouter文档</a></div>
            <div><Link href='https://mui.com/zh/material-ui/react-link/'>material-ui</Link></div>
            <Box
                sx={boxSx}
            >
                <Link href='https://react-redux.js.org/'>react-redux</Link>
                <Link href='https://redux.js.org/'>redux</Link>
                <Link href='https://www.redux.org.cn/'>redux中文</Link>
            </Box>
            <Box sx={boxSx}>
                <Link href='http://www.divcss5.com/rumen/r50591.shtml'>css五大选择器</Link>
                <Link href='https://blog.csdn.net/qq_43201350/article/details/109386543'>{'css选择器&和＞'}</Link>
                <Link href='https://blog.csdn.net/Embrace924/article/details/122944616'>CSS 伪类</Link>
            </Box>
        </div>
        <Button variant="contained" color="primary" onClick={logout}>
            登出
        </Button>

    </div>
}